<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>Examples</title>
<style>
	*{margin: 0; padding: 0;}
</style>
</head>
<body>
    <canvas></canvas>
    <script>
    (function(){
    	var canvas =document.querySelector("canvas"), // 获取canvans
    		context = canvas.getContext("2d");
    		// step1:设置canvans高宽
    	canvas.width = document.documentElement.clientWidth-10; 
    	canvas.height = document.documentElement.clientHeight-10; 
    	// step2: 设置图片
    	
    	function showImage(){
    		canvas.style.backgroundSize = "contain";  // 使图片在中间显示
    		canvas.style.backgroundRepeat = "no-repeat";
    		canvas.style.backgroundImage ="url('images/mm.jpg')";
    		console.log(1)
    	};
    	// step3: 画一个覆盖图片
    	var img = new Image(); // canvans加载显示图片的方式
    	img.src = "images/rain.jpg";
    	img.onload = function(){
    		context.drawImage(img,0,0,canvas.width,canvas.height);
    	}
    	// step4: 手指滑动
    	canvas.addEventListener("touchstart",function(){
    		 // 当触发手指滑动事件时背景图片显示
    		 showImage();
    	});
    	canvas.addEventListener("touchmove",function(e){
    		var x = e.changedTouches[0].pageX,// 一支手指触发touchmove事件
    			y = e.changedTouches[0].pageY;
    		context.globalCompositeOperation = "destination-out";
    		context.moveTo(x,y);
    		context.arc(x,y,30,0,2*Math.PI); // 设置内小圆的画布
    		context.fillStyle = "white";
    		context.fill();	
    	});


    })()
    </script>
</body>
</html>